<template>
  <cs-card v-loading="isLoading">
    <div class="formTitle_G">
      <span>新闻详情</span>
      <div>
        <cs-btn btnText="取消" type="search" @click.native="cancelBtnClick" />
      </div>
    </div>
    <div class="formContent_G">
      <!-- 70px    3.64583vw-->
      <el-form label-width="70px" class="form_G">
        <el-form-item label="上传封面" class="formUploadCover_G">
          <el-upload
            class="avatar-uploader_G"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :limit="1"
            :file-list="uploadImgList"
            :on-progress="handleImgUploadProgress"
            :on-success="handleImgSuccess"
            :on-error="handleImgError"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleUploadImgRemove"
            :disabled="true"
            :class="formData.coverUrl ? 'uploadImg' : ''"
          >
            <i class="el-icon-plus"></i>
            <span class="addPhoto_G" v-show="isShowUploadTip">添加照片</span>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" title="图片预览">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
          <div class="uploadCoverTipBox_G">
            <div class="uploadCoverTip_G">
              <span>*</span>
              <span>建议banner图封面尺寸750*300px</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="新闻标题">
          <el-input :disabled="true" v-model="formData.firstTitle"></el-input>
        </el-form-item>
        <el-form-item label="新闻副标">
          <el-input :disabled="true" v-model="formData.lastTitle"></el-input>
        </el-form-item>
        <el-form-item
          label="新闻类型"
          :class="formData.categoryIds.length === 0 ? '' : 'formItemBottom_6_G'"
        >
          <cs-tag
            type="plainPrimary"
            v-for="item in formData.categoryIds"
            :key="item.id"
            :isClose="false"
            class="newsTypeTag_G"
            @closeTagEvent="closeNewsTypeFormTagEvent(item.id)"
            >{{ item.label }}</cs-tag
          >
        </el-form-item>
        <el-form-item
          label="投放小区"
          :class="
            formData.communityIds.length === 0 ? '' : 'formItemBottom_6_G'
          "
        >
          <cs-tag
            type="plainPrimary"
            v-for="item in formData.communityIds"
            :key="item.id"
            :isClose="false"
            class="communityTag_G"
            @closeTagEvent="closeResidentialFormTagEvent(item.communityId)"
            >{{ item.name }}</cs-tag
          >
        </el-form-item>
        <el-form-item label="新闻顺序" prop="sort">
          <el-input-number
            v-model="formData.sort"
            :disabled="true"
            :min="1"
            :max="99999"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="是否轮播" prop="isBanner">
          <el-checkbox
            v-model="formData.isBanner"
            true-label="1"
            false-label="0"
            disabled
            >是否轮播</el-checkbox
          >
        </el-form-item>
        <el-form-item label="新闻内容">
          <div id="richTextEditorBox"></div>
        </el-form-item>
      </el-form>
    </div>
  </cs-card>
</template>

<script>
import CsCard from "@/components/CsCard/CsCard.vue";
import CsBtn from "@/components/CsBtn/CsBtn.vue";
import CsTag from "@/components/CsTag/CsTag.vue";

import E from "wangeditor";

import { queryNewsDetailById } from "@/api/news";

export default {
  name: "releaseNews",
  components: {
    CsCard,
    CsBtn,
    CsTag,
  },
  data() {
    return {
      formData: {
        firstTitle: "", // 新闻标题
        lastTitle: "", // 新闻副标
        coverUrl: "", // 上传封面链接
        categoryIds: [], // 新闻类型ID数组
        communityIds: [], // 投放小区ID
        sort: 0,
        isBanner: "0",
        content: "", // 新闻内容
      },
      isLoading: false,
      residentialAreaLabelData: [], // 投放小区标签数据
      isShowUploadTip: true,
      imageUrl: "",
      uploadImgList: [],
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  created() {
    this.queryNewsDetailById();
  },
  mounted() {
    this.createWebRichTextEditor();
  },

  methods: {
    async queryNewsDetailById() {
      this.isLoading = true;
      const data = await queryNewsDetailById({ newsId: this.$route.query.id });
      console.log(data);
      const listData = data.data;
      this.formData = {
        firstTitle: listData.firstTitle, // 新闻标题
        lastTitle: listData.lastTitle, // 新闻副标
        coverUrl: listData.coverUrl, // 上传封面链接
        categoryIds: listData.categories, // 新闻类型ID数组
        communityIds: listData.communities, // 投放小区ID
        sort: listData.sort,
        isBanner: listData.isBanner + "",
        content: listData.content, // 新闻内容
      };
      // console.log(
      //   process.env.VUE_APP_BASE_API +
      //     "/" +
      //     this.formData.coverUrl.split("/")[
      //       this.formData.coverUrl.split("/").length - 1
      //     ]
      // );
      // this.formData.coverUrl = "blob:" + this.formData.coverUrl;
      console.log(this.formData.coverUrl);
      this.uploadImgList.push({
        name: this.formData.coverUrl.split("/")[
          this.formData.coverUrl.split("/").length - 1
        ],
        url: this.formData.coverUrl,
      });

      this.editor.txt.html(this.formData.content);
      this.isLoading = false;
    },
    handleImgUploadProgress(event, file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.isShowUploadTip = false;
    },
    handleImgSuccess(response, file, fileList) {},
    handleImgError(err, file, fileList) {
      this.imageUrl = "";
      this.isShowUploadTip = true;
      this.$message.error("图片上传失败");
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleUploadImgRemove() {
      return false;
      this.imageUrl = "";
      this.isShowUploadTip = true;
    },
    createWebRichTextEditor() {
      this.editor = new E("#richTextEditorBox");
      // 设置编辑器高度
      this.editor.config.height = 384;
      this.editor.config.placeholder = "必填，请输入公告内容";
      this.editor.config.zIndex = 200;
      // 取消自动 focus
      this.editor.config.focus = false;
      this.editor.create();
      this.editor.disable();
    },
    cancelBtnClick() {
      this.$router.push("/news");
    },
  },
};
</script>

<style lang="scss" scoped>
.cs-card {
  margin: 26px;
}

.form_G {
  .positionFormItem {
    margin-bottom: 10px;
  }

  .ejectRuleSelect {
    width: 100%;
  }

  .uploadImg {
    ::v-deep .el-upload--picture-card {
      display: none;
    }
  }
}

.timeSlotRadioBox {
  width: 780px;

  .formRadio_G {
    margin-top: 16px;
  }
}

.avatar-uploader_G {
  ::v-deep .el-upload-list__item-delete {
    display: none !important;
  }
}
</style>
